<template>
  <div class="tabs">
    <div style="width: 340px">
      <div class="content">
        <ul class="titles flex">
          <li v-for="(item,i) in titles" :key="i" 
          :class="{active: i===active}" @click="active = i">{{item}}</li>
        </ul>
       
        <div class="contenier">
           <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
 name: 'QrTabs',
 props: {
    value: {
       type: Number,
       default: 0
    }
 },
 data() {
   return {
     titles: [],
     active : 0
   }
 },
 watch: {
  active(i) {
    this.$children.forEach((r,j) => {
       r.show = i === j
    })
    this.$emit('input', i)
  }
 },
 mounted() {
    this.$children[this.active].show = true
 }
}
</script>

<style  scoped>

   .content .titles li {
      flex: 1;
      margin: 0 10px;
      text-align: center;
      cursor: pointer;
      padding: 10px;
   }
   .content .titles li:hover {
      color: #409eff;
   }
   .content .titles li.active {
      color: #409eff;
      border-bottom: 2px  #409eff solid ;
   }
   .contenier {
      margin: 10px 24px;
   }
   .content {
       overflow: hidden;
   }
</style>
